import React, { useState, useEffect } from 'react'
import { Breadcrumb, Button, Table } from "antd"
import { SearchOutlined, CloudUploadOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import style from './index.module.scss'



export default function LoanStatistical() {
    const [echarts1, setMain] = useState('')
    const columns = [
        {
            title: '日期',
            dataIndex: 'data1',
        },
        {
            title: '新浪财经',
            dataIndex: 'numbers2',
        },
        {
            title: '融360',
            dataIndex: 'rong_numbers',
        },
        {
            title: '百度',
            dataIndex: 'baidu_numbers',
        },
        {
            title: '支付宝',
            dataIndex: 'alipay_numbers',
        },
    ];
    const dataSource = [
        {
            key: '1',
            data1: '2-26(一)',
            numbers2: 2345,
            rong_numbers: 1323,
            baidu_numbers: 3445,
            alipay_numbers: 3455
        },
        {
            key: '2',
            data1: '2-25(日)',
            numbers2: 344,
            rong_numbers: 5456,
            baidu_numbers: 232,
            alipay_numbers: 432
        },
        {
            key: '3',
            data1: '2-25(日)',
            numbers2: 565,
            rong_numbers: 2323,
            baidu_numbers: 5345,
            alipay_numbers: 323
        },
    ];
    const option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['其他', '新浪财经', '融360', '百度']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1-28', '1-30', '2-1', '2-3', '2-5', '2-7', '2-9', '2-11', '2-13', '2-15']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '其他',
                type: 'line',
                stack: 'Total',
                data: [1100, 1050, 1201, 900, 380, 370, 390, 375, 376, 400]

            },
            {
                name: '新浪财经',
                type: 'line',
                stack: 'Total',
                data: [1040, 1030, 1200, 920, 400, 390, 370, 399, 389, 379]
            },
            {
                name: '融360',
                type: 'line',
                stack: 'Total',
                data: [1000, 900, 456, 900, 123, 343, 899, 322, 453, 1234]
            },
            {
                name: '百度',
                type: 'line',
                stack: 'Total',
                data: [445, 765, 987, 334, 123, 543, 143, 543, 345, 111]
            }

        ]
    };
    useEffect(() => {
        var node = document.getElementById('echarts1')
        setMain(node)
    }, [])
    // 基于准备好的dom，初始化echarts实例
    if (echarts1 !== "") {
        var myChart = echarts.init(echarts1);
        myChart.resize({ height: '400px' })
        myChart.setOption(option);
    }

    return (
        <div>
            <Breadcrumb style={{ margin: '16px 0', display: "flex", justifyContent: "start" }}>
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <Breadcrumb.Item>数据分析</Breadcrumb.Item>
                <Breadcrumb.Item>渠道统计</Breadcrumb.Item>
            </Breadcrumb>
            <div className={style.pre_title}>
                <p>各渠道注册用户数</p>
                <Button className='button'><CloudUploadOutlined className="icon" />导出</Button>
            </div>
            <div id="echarts1"></div>
            <div className={style.pre_title}>
                <p>数据明细</p>
                <Button className='button'><CloudUploadOutlined className="icon" />导出</Button>
            </div>
            <Table dataSource={dataSource} columns={columns} pagination={false} />
            <div id="echart1"></div>

        </div>
    )
}
